import React, { useContext, useState } from 'react'
import { Form, Input, Button, message, Divider, Space } from 'antd';
import { UserOutlined, LockOutlined } from '@ant-design/icons'
import { Link,useHistory } from 'react-router-dom';
import VerificationCode from './VerificationCode'
import './index.css'
export default function Login() {
    // const { setUser } = useContext(GlobalContext);
    const [captcha, setCaptcha] = useState('');
    const [sign, setSign] = useState(false)
    let history = useHistory();
    const layout = {
        labelCol: {
            span: 8,
        },
        wrapperCol: {
            span: 16,
        },
    };

    const tailLayout = {
        wrapperCol: {
            offset: 8,
            span: 16,
        },
    };

    const onFinish = (values) => {
        console.log(values);
        if (values.incaptcha.toLocaleLowerCase() !== captcha.toLocaleLowerCase()) {
            message.error("验证码错误");
        } else {
            if (values.password === '123' ,values.username === 'lap') {
                history.push("/UserPage");
            }
            else if (values.password === '123',values.username === 'jl') {
                history.push("/ManagePage")
            }
            else{
                message.error("账号或密码错误");
            }
            // doLogin(username, password).then(res => {
            //     console.log(res);
            //     const {
            //         data,
            //         data: { status, message: dataMsg }
            //     } = res;
            //     if (status === 400) {
            //         message.error(dataMsg);
            //     } else {
            //跳转到首页
            // message.info(dataMsg);
            // setUser(data.data)
            // navigate('/UserPage')
            // setSign(true)
            //     }
            // }).catch(e => {
            //     message.error(e);
            // })
        }

    };

    const onFinishFailed = (errorInfo) => {
        console.log('Failed:', errorInfo);
    };
    return (
        <>
            <div className="log_box">
                <div className="form_box">
                    <div className="login_form">
                        <Divider >使用账号密码登录</Divider>
                        <Form className="loginstyle"
                            // {...layout}
                            name="basic"
                            initialValues={{
                                remember: true,
                            }}
                            onFinish={onFinish}
                            onFinishFailed={onFinishFailed}
                        >
                            <Form.Item
                                name="username"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input your username!',
                                    },
                                ]}
                            >
                                <Input placeholder="Username"
                                    maxLength={30}
                                    size="large"
                                    prefix={<UserOutlined className="site-form-item-icon" />}
                                ></Input>
                            </Form.Item>

                            <Form.Item
                                name="password"
                                rules={[
                                    {
                                        required: true,
                                        message: 'Please input your password!',
                                    },
                                ]}
                            >
                                <Input.Password placeholder="Password"
                                    maxLength="30"
                                    size="large"
                                    prefix={<LockOutlined className="site-form-item-icon" />}
                                />
                            </Form.Item>
                            <Form.Item
                                name="incaptcha"
                            >
                                <Space>
                                    <VerificationCode setCaptcha={setCaptcha}></VerificationCode>
                                    <Input placeholder="请输入验证码" maxLength="50" size="large" />
                                </Space>
                            </Form.Item>
                            <Form.Item>
                                    <Button size="large" block type="primary" htmlType="submit" shape="round">
                                        登录
                                    </Button>

                            </Form.Item>

                        </Form>

                    </div>
                </div>
            </div>
        </>
    )
}
export { Login }